 <!-- 
 @Author: Havery   
 @Date: 2021-01-11 13:58:16   
 @function:消息管理
----------------------------------------------------------  
 @Last Modified by:  LW
 @Modified function: 完成消息阅读和模糊查询功能
 -->
<template>
  <div>
    <!-- ref相当于Id:model是表单内容-->
    <el-form
      label-width="120px"
      ref="modifyInfo"
      :rules="formInfoRules"
      :model="formInfo"
    >
      <el-row>
        <!-- 列表信息 -->
        <el-col :span="12" style="height: 400px">
          <el-form :inline="true" :model="formSearch" class="user-search">
            <el-form-item label="模糊搜索：">
              <el-input 
              size="mini" 
              v-model="formSearch.parameters.sKeyWords"
              placeholder="用户名称/电话/QQ/邮箱/组织/岗位"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-search"
                @click="handleSearch()"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
           class="ptab"
            border
            stripe
            size="mini"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            element-loading-text="拼命加载中"
            style="width: 99%"
            :height="tableHeight"
            @selection-change="changeFun"
          >
            <el-table-column type="selection" class="checkbox-inp" width="50px">
            </el-table-column>
            <el-table-column label="序号" width="50px">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="department_names"
              label="部门"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="realname"
              label="真实名称"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="mobile_phone"
              label="联系方式"
            ></el-table-column>
          </el-table>
          <!-- 分页组件 pageparm返回的分页参数信息 pageListInfo为分页组件回掉方法-->
          <Pagination
            v-bind:child-msg="pageparm"
            @callFather="pageListInfo"
          ></Pagination>
        </el-col>
        <!-- 基本信息 -->
        <el-col :span="12" style="height: 400px">
          <el-form-item label="搜　　索：">
            <el-select
              v-model="formRequest.receiver_type"
              placeholder="请选择"
              size="mini"
              style="width:100%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消息标题：" style="width:100%">
            <el-input
              size="mini"
              v-model="formRequest.title"
              placeholder="消息标题"
               
            ></el-input>
          </el-form-item>
          <el-form-item label="消息内容：">
            <el-input
              v-model="formRequest.content"
              size="mini"
              type="textarea"
              rows="14"
              maxlength="250"
              show-word-limit
              placeholder="消息内容"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" :loading="loading"  @click="submitForm('modifyInfo')">保存</el-button>
    </div>
  </div>
</template>
<script>

import MessageHttp from "@/api/basic/message"; //http
import Pagination from "@/components/common/pagination"; //分页组建
//定义变量
const {
  loadListExceptMyself, //获取操作日志分页信息
  sendMessage, //发送消息
} = MessageHttp;
export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  props: ["formInfo"], //父界面v-bind:editInfo一致
  components: {
    Pagination,
  },
  data() {
    return {
      //列表相关
      loading: false, //是显示加载
      tableHeight: window.innerHeight * 0.35, //表格高度
      pageparm: { currentPage: 1, pageSize: 45, total: 0 }, //分页参数
      listData: [], //表格返回信息
      formSearch: {
        //请求数据参数
        page: 1,
        limit: 45,
        field: "department_names",
        order: "asc",
        parameters: {
          sKeyWords: "",
        }, //关键字
      },
      options: [
        { value: "100", text: "所有用户" },
        { value: "101", text: "列表用户" },
        { value: "102", text: "选中用户" },
      ],
      value: "100",
      loading: false, //是显示加载
      //验证对象，由Rules结尾
      formInfoRules: {
        title: [
          {
            required: true,
            min: 1,
            max: 18,
            message: "标题不能为空，最大长度为18",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "消息内容不能为空",
            trigger: "blur",
          },
        ],
      },
      //发送消息需要的参数
      formRequest: {
        receiver_type: "100",
        user_ids: [],
        title: "",
        content: "",
      },
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
     this.loadListExceptMyself(this.formSearch);
  },
  methods: {
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
    loadListExceptMyself(par) {
      this.loading = true;
      loadListExceptMyself(par).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listData = data.Data;
          //分页赋值
          this.pageparm.currentPage = this.formSearch.page;
          this.pageparm.pageSize = this.formSearch.limit;
          this.pageparm.total = data.Count;
        } else {
          this.$messageTip.warning(data.Msg); 
        }
        this.loading = false;
      });
    },
    //分页插件事件
    pageListInfo(par) {
      this.formSearch.page = par.currentPage;
      this.formSearch.limit = par.pageSize;
      this.loadListExceptMyself(this.formSearch);
    },
    //搜索事件
    handleSearch() {
      this.formSearch.page = 1;
      this.formSearch.limit = 45;
      this.loadListExceptMyself(this.formSearch);
    },
    //选中事件
    changeFun(row) {
      this.formRequest.user_ids = []; //每次改动重置ID
      row.forEach((item) => {
        this.formRequest.user_ids.push(item.id);
      });
    },
    //保存信息
    submitForm(modifyRef) {
      let self = this;
      this.$refs[modifyRef].validate((valid) => {
        if (valid) {
          sendMessage(this.formRequest).then((response) => {
            let data = response.data;
            if (data.Code === 1000) {
               this.$messageTip.success(data.Msg); 
               this.$emit("callBack", data);
            } else {
              this.$messageTip.warning(data.Msg); 
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>